<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>条形图</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
        div.bar {
            display: inline-block;
            width: 20px;
            height: 35px;
            /* Gets overriden by D3-assigned height below */
            margin-right: 2px;
            background-color: rgb(128, 0, 0);
        }
    </style></head>
<body>
    <script type="text/javascript">
        var dataset = [10, 20, 30, 40, 50];
        d3.select("body").selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("height", function (d) {
                var barHeight = d * 5;
                return barHeight + "px";
            });
    </script></body></html>